<template>
    <div class="business-detail">
        <h3 style="color: white;">管理{{ userType }}账户: {{ user.name }}</h3>
        <div class="form-group">
            <label for="name">账户名:</label>
            <a-input v-model:value="user.username" id="name" />
        </div>
        <div class="form-group">
            <label for="phone">手机号码:</label>
            <a-input v-model:value="user.phone" id="phone" />
        </div>
        <div class="form-group">
            <label for="address">地址:</label>
            <a-input v-model:value="user.address" id="address" />
        </div>
        <div class="form-group">
            <label for="password">修改密码:</label>
            <a-input-password v-model:value="newPassword" id="password" />
        </div>
        <div class="form-group">
            <label>头像:</label>
            <div class="avatar-container">
                <img :src="user.avatar" alt="avatar" class="avatar" />
                <a-button danger @click="removeAvatar">删除头像</a-button>
            </div>
        </div>
        <div class="button-group">
            <a-button type="primary" @click="saveChanges">保存修改</a-button>
            <a-button @click="cancel">取消</a-button>
            <a-button danger @click="deleteAccount">删除该账户</a-button>
        </div>
    </div>
</template>

<script>
//import { parseStyle } from 'ant-design-vue/es/_util/cssinjs/hooks/useStyleRegister';
import { onMounted, ref } from 'vue';
import request from '../../../util/request';
import { message } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';

export default {
    name: 'AccountEditor',
    // props: {
    //     userid: {
    //         type: String,
    //         required: true,
    //     //   user: {
    //     //     type: Object,
    //     //     required: true,
    //     //   },
    //     },
    //     userType: {
    //         type: String,
    //         required: true,
    //     },
    // },
    setup() {

        const router = useRouter();

        const userid = useRoute().query.id;
        const userType = useRoute().query.type;

        const user = ref({
            userid: '',
            username: '',
            phone: '',
            address: '',
            avatar: '',
        });

        const newPassword = ref('');

        onMounted(() => {
            console.log(userid + userType);
            request.post('/account/get', {
                userid: userid,
                role: userType,
            }).then((res) => {
                user.value = res.data;
                console.log(user.value);
            });
        })

        const removeAvatar = () => {
            // 删除头像逻辑
            console.log('头像已删除');
        };

        const saveChanges = () => {
            // 保存修改逻辑
            // if (newPassword.value === '') {
            //     message.error('密码不能为空');
            //     return
            // }
            if (user.value.username === '') {
                message.error('用户名不能为空');
                return
            }
            if (user.value.phone === '') {
                message.error('手机号码不能为空');
                return
            }
            request.post('/account/edit', {
                userid: user.value.userid,
                role: userType,
                username: user.value.username,
                phone: user.value.phone,
                address: user.value.address,
                password: newPassword.value,
            }).then((res) => {
                if (res.data.flag === 'success') {
                    message.success('修改成功');
                } else {
                    message.error('修改失败');
                }
            }).catch((error) => {
                message.error('修改失败: ' + error);
            });
            // console.log('保存修改:', {
            //     role: props.userType, // 添加用户类型
            //     name: props.user.,
            //     phone: props.user.phone,
            //     address: props.user.address,
            //     newPassword: newPassword.value,
            // });
        };

        const cancel = () => {
            // 取消操作逻辑
            if (userType === 'customer') {
                router.push({ name: 'AdminCusManager' });
            } else if (userType === 'business') {
                router.push({ name: 'AdminBusManager' });
            }
        }

        const deleteAccount = () => {
            // 删除账户逻辑
            // 调用删除账户的API
            if (!confirm('确定要删除该账户吗？')) {
                return;
            }
            request.post('/account/delete', {
                userid: userid,
                role: userType,
            }).then((res) => {
                if (res.data.flag === 'success') {
                    message.success('删除成功');
                    if (userType === 'customer') {
                        router.push({ name: 'AdminCusManager' });
                    } else if (userType === 'business') {
                        router.push({ name: 'AdminBusManager' });
                    }
                } else {
                    message.error('删除失败');
                }
            }).catch((error) => {
                message.error('删除失败: ' + error);
            });
        };

        return {
            userid,
            userType,
            user,
            newPassword,
            removeAvatar,
            saveChanges,
            cancel,
            deleteAccount,
        };
    },
};
</script>

<style scoped>
.business-detail {
    padding: 24px;
    background: #1a1a1a;
    /* 暗色背景 */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    /* 字体颜色为白色 */
}

.form-group {
    margin-bottom: 16px;
}

.avatar-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.button-group {
    margin-top: 24px;
    display: flex;
    gap: 16px;
}
</style>